<template>
  <div>
    <h1>{{msg}}</h1>
    <h2>学生姓名：{{name}}</h2>
    <h2>学生性别：{{sex}}</h2>
    <h2>年龄：{{myAge+1}}</h2>
    <button @click="updateAge">更新年龄</button>
  </div>
</template>

<script>
export default {
  name: 'StudentItem',
  data(){
    return {
      msg: '学生信息档案',
      myAge: this.age,
    }
  },
  methods: {
    updateAge(){
      this.myAge++
    }
  },

  // 尽量不需要修改props的属性值
  // 如果props的属性和data中的属性名相同，则props属性优先，不要重名
  //第一种方法 自定义属性
  // props:['name','sex','age']

  // 第二种方法 自定义属性限制数据类型
  // props:{
  //   name: String,
  //   sex: String,
  //   age: Number
  // }

  // 第三种方法 自定义属性限制数据类型，必要性限制，默认值限制
  props:{
    name:{
      type: String,
      required: true
    },
    sex:{
      type: String,
      required: false
    },
    age: {
      type: Number,
      default: 99
    }
  }
}
</script>

<style>
</style>